<template>
  <div>
    <div class="demo-drawer__header">
        <el-button type="primary" plain size="mini" v-if="dataForm.status === 0" @click="borrowFormVisible = true">挂出</el-button>
        <el-button type="primary" plain size="mini" v-if="dataForm.status === 0" @click="transactionVisible = true">借出</el-button>
        <el-button type="primary" plain size="mini" @click="addOrUpdateHandle()">修改</el-button>
    </div>
    <div>
      <h4><span style="color:#fc8e2d">基础信息</span>  {{ getOpSign }}</h4>
      <el-form :model="dataForm" ref="dataForm" class="queryForm" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名：">
              {{dataForm.name}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号：">
              {{dataForm.idCard}}
            </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col :span="12">
            <el-form-item label="证书类型：">
              {{dataForm.idType}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证书专业：">
              {{dataForm.profession}}
            </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col :span="12">
            <el-form-item label="证书编号：">
              {{dataForm.certificateNo}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发证时间：">
              {{dataForm.releaseTime.substring(0,10)}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
              <el-form-item label="到期时间：">
                {{dataForm.validityEndTime? dataForm.validityEndTime.substring(0,10):'-'}}
              </el-form-item>
            </el-col>
        </el-row>
        <div v-if="dataForm.certificateType == 2">
          <el-row>
              <el-col :span="12">
                <el-form-item label="借入日期：" v-if="dataForm.borrowTime">
                  {{dataForm.borrowTime.substring(0,10)}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="到期日期：" v-if="dataForm.borrowEndTime">
                  {{dataForm.borrowEndTime.substring(0,10)}}
                </el-form-item>
              </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="证书来源：">
                <span v-if="dataForm.borrowCandidatesSources === 1">
                  个人
                </span>
                <span v-else-if="dataForm.borrowCandidatesSources === 2">
                  企业
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="来源企业：" v-if="dataForm.borrowCandidatesSources === 2">
                {{dataForm.borrowOrgName}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
              <el-col :span="12">
                <el-form-item label="联系人：">
                  {{dataForm.borrowContact}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="手机号：">
                  {{dataForm.borrowContactMobile}}
                </el-form-item>
              </el-col>
          </el-row>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="证书扫描件：">
              <ele-image :urls="dataForm.certifInfoList"></ele-image>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="dataForm.certificateType === 2 && dataForm.contractInfoList && dataForm.contractInfoList.length > 0">
            <el-form-item label="打款凭证：">
              <ele-image :urls="dataForm.contractInfoList"></ele-image>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div v-for="(item,i) in dataForm.certiTransactionInfoList" :key="'cts' + i">
      <certiransitemdetails :ct="item"></certiransitemdetails>
    </div>

    <el-dialog
    title="证书挂出"
    style="left:30%;top:-15%;"
    width="80%"
    class="dialogForm"
    :visible.sync="borrowFormVisible"
    append-to-body
    center
    >
      <el-form :model="borrowForm" :rules="borrowFormRule" ref="borrowForm" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="接收单位" prop="toDeptName">
              <el-input v-model="borrowForm.toDeptName" placeholder="请填写接收单位"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接收人" prop="toUserName">
              <el-input v-model="borrowForm.toUserName" placeholder="请填写接收人"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="toUserMobile">
              <el-input v-model="borrowForm.toUserMobile"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="挂出时间" prop="transactionTime">
              <el-date-picker type="date" v-model="borrowForm.transactionTime" placeholder="选择借出时间" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="transactionTime">
              <el-date-picker type="date" v-model="borrowForm.transactionEndTime" placeholder="选择借出时间" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="挂靠价格">
              <el-input v-model="borrowForm.affiliationIncome"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="中介费用">
              <el-input v-model="borrowForm.agencyFee"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="其他费用">
              <el-input v-model="borrowForm.otherFee"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否已支付">
              <el-select v-model="borrowForm.payFlag" placeholder="请选择" style="width:100%">
                    <el-option
                      v-for="item in optionsPayment"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="打款时间">
              <el-date-picker type="date" v-model="borrowForm.payTime" placeholder="选择借出时间" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否税后">
              <el-select v-model="dataForm.tax" placeholder="请选择" style="width:100%">
                    <el-option
                      v-for="item in optionsPayment"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
          <el-form-item class="form-s" label="上传打款凭证">
                  <el-upload
                  class="upload-s"
                  ref="contractUpload"
                  accept =".jpg,.png"
                  :action="uploadUrl()"
                  :with-credentials="true"
                  :on-remove="onRemove"
                  :headers="myHeader"
                  :limit="limitNum"
                  :show-file-list="showList"
                  :on-success="onContractSuccess"
                  :on-error="onError"
                  list-type="picture-card">
                  <i class="el-icon-plus"></i>
                  <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png图片文件，且不超过800kb，其他无效</div> -->
                </el-upload>
              </el-form-item>
          </el-col>

        </el-row>
        <el-row>
            <el-col :span="24">
              <el-form-item label="费用说明">
                <el-input type="textarea" :rows="6" v-model="borrowForm.remark" placeholder="请填写中介、挂出等费用说明"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="borrowFormVisible = false">取 消</el-button>
        <el-button size="small" type="primary" plain @click="borrowFormSubmit()">挂 出</el-button>
      </div>
    </el-dialog>

    <el-dialog
    title="证书借出"
    style="left:30%;top:8%;"
    width="80%"
    :visible.sync="transactionVisible"
    append-to-body
    >
      <el-form :model="form" :rules="dataRule" ref="form" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="接收单位" prop="toDeptId">
              <el-tree-select
                style="width:100%"
                :data="treeData"
                v-model="form.toDeptId"
                node-key="id"
                placeholder="请接收单位"
                @change="keepDeptChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接收人" prop="toUserId">
              <el-select v-model="form.toUserId" placeholder="请选择接收人" style="width:100%">
                <el-option
                  v-for="item in employees"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="toUserMobile">
              <el-input v-model="form.toUserMobile"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="借出时间" prop="transactionTime">
              <el-date-picker type="date" v-model="form.transactionTime" placeholder="选择借出时间" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="证书用途" prop="toUserMobile">
              <el-select v-model="form.usage" placeholder="请选证书用途" style="width:100%">
                <el-option
                  v-for="item in usages"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input type="textarea" :rows="6" v-model="form.remark" placeholder="请填写情况说明"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="transactionVisible = false">取 消</el-button>
        <el-button size="small" type="primary" plain @click="transactionFormSubmit()">借 出</el-button>
      </div>
    </el-dialog>
    <certificateinfo-add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataInfo"></certificateinfo-add-or-update>
  </div>
</template>

<script>
  import ElTreeSelect from "@/components/treeSelect/index.vue"
  import EleImage from './ele-image.vue'
  // import EleImage from "@/components/ele-image/ele-image.vue"
  import CertificateinfoAddOrUpdate from './certificateinfo-add-or-update'
  import Certiransitemdetails from './../certitrans/certitrans-item-details'
  import Vue from "vue"
  export default {
    props: {
      dataForm: {
        type: Object
      }
    },
    data () {
      return {
        visible:true,
        borrowFormVisible: false,
        transactionVisible: false,
        formLabelWidth: '120px',
        borrowForm: {
          tax:'',
          otherFee:'',
          payTime:'',
          payFlag:1,
          toUserMobile:'',
          agencyFee:'',
          affiliationIncome:'',
          transactionEndTime:'',
          toDeptName: '',
          toUserName: '',
          toUserMobile: '',
          transactionTime: '',
          remark: ''
        },
        borrowFormRule: {
          toDeptName: [
            { required: true, message: '请填写接收单位', trigger: 'blur' }
          ],
          toUserName: [
            { required: true, message: '请填写接收人', trigger: 'blur' }
          ],
          toUserMobile: [
            { required: true, message: '请填写联系电话', trigger: 'blur' }
          ],
          remark: [
            { required: true, message: '请填写情况说明', trigger: 'blur' }
          ],
          transactionTime: [
            { required: true, message: '请选择挂出时间', trigger: 'blur' }
          ]
        },
        limitNum: 1,
        showList: true,

        form: {
          toDeptId: '',
          toUserId: '',
          toUserMobile: '',
          transactionTime: '',
          usage: 22,
          remark: ''
        },
        optionsPayment:[{
          value: 0,
          label: '是'
        },{
          value: 1,
          label: '否'
        }],
        dataRule: {
          toDeptId: [
            { required: true, message: '请选择接收单位', trigger: 'blur' }
          ],
          toUserId: [
            { required: true, message: '请选择接收人', trigger: 'blur' }
          ],
          toUserMobile: [
            { required: true, message: '请填写联系电话', trigger: 'blur' }
          ],
          remark: [
            { required: true, message: '请填写情况说明', trigger: 'blur' }
          ],
          transactionTime: [
            { required: true, message: '请选择借出时间', trigger: 'blur' }
          ]
        },
        modalAppendToBody: false,
        addOrUpdateVisible:false,
        treeData: [],
        employees: [],
        usages:[
          {id: 21, name:'投标'},
          {id: 22, name:'项目'},
        ]
      }
    },
    created () {
      this.initOrgTree()
    },
    computed:{
      getOpSign(){
        if(this.dataForm.certificateType === 1){
         return  "在职员工证书"
        }else if(this.dataForm.certificateType === 2){
        return  "挂靠证书"
        }else{
        return "非在职员工证书"
        }
        // this.dataForm.certificateType === 2? "兼职证书":"在职员工证书"
      },
      myHeader(){
        return {
          "token":Vue.cookie.get('token')
        }
      }
    },
    components: {
      CertificateinfoAddOrUpdate, ElTreeSelect, Certiransitemdetails, EleImage
    },
    methods: {
      initOrgTree() {
        this.$http({
          url: this.$http.adornUrl('/tenant/tenantDeptInfo/tree'),
          method: 'get',
          params: {}
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.treeData = [data.deptInfo]
          } else {
            this.treeData = []
          }
        })
      },
      onContractSuccess(response, file, fileList){
        this.constractPicList = fileList
      },
      onError(err, file, fileList){
        this.$message.error("上传失败")
      },
      uploadUrl(){
        return this.$http.adornUrl(`/certificate/certificateInfo/upload`)
      },
      onRemove(file, fileList){
      console.log(this.file)
      console.log(this.fileList);
      },
      keepDeptChange(id, item){
        this.employees = []
        this.dataForm.keepUserId = ''
        this.$http({
          url: this.$http.adornUrl('/certificate/employeeInfo/getEmployeeInfos'),
          method: 'get',
          params: this.$http.adornParams({
                  'deptId': id
                })
        }).then(({data}) => {
          if (data && data.length > 0) {
            this.employees = data
          }
        })
      },
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init('', this.dataForm.id)
        })
      },
      getDataInfo(){
        this.$emit('refreshDataList')
      },
      transactionFormSubmit(){
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/certificate/certiTransactionInfo/save'),
              method: 'post',
              data: this.$http.adornData({
                'certificateId': this.dataForm.id || undefined,
                'type': 3,
                'toDeptId': this.form.toDeptId,
                'toUserId': this.form.toUserId,
                'toUserMobile': this.form.toUserMobile,
                'transactionTime': this.$dateFormat(this.form.transactionTime),
                'usage': this.form.usage,
                'remark': this.form.remark
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.status = data.c.status
                this.dataForm.certiTransactionInfoList = data.ctList
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.transactionVisible = false
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
      borrowFormSubmit(){
        this.$refs['borrowForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/certificate/certiTransactionInfo/save'),
              method: 'post',
              data: this.$http.adornData({
                'certificateId': this.dataForm.id || undefined,
                'type': 21,
                'toDeptName': this.borrowForm.toDeptName,
                'toUserName': this.borrowForm.toUserName,
                'toUserMobile': this.borrowForm.toUserMobile,
                'transactionTime': this.$dateFormat(this.borrowForm.transactionTime),
                'remark': this.borrowForm.remark,
                'payTime':this.borrowForm.payTime,
                'payFlag':this.borrowForm.payFlag,
                'agencyFee':this.borrowForm.agencyFee,
                'transactionEndTime':this.borrowForm.transactionEndTime,
                'affiliationIncome':this.borrowForm.affiliationIncome,
                'otherFee':this.borrowForm.otherFee,
                'tax':this.borrowForm.tax
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.status = data.c.status
                this.dataForm.certiTransactionInfoList = data.ctList
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.borrowFormVisible = false
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss">
.dialogForm{
  .el-form-item__label{
    width: 90px !important;
  }
  .form-s{
    .el-form-item__label{
    width: 110px !important;
   }
  }
  .upload-s{
    margin-left: 20px;
  }
  .el-form-item__content{
    margin-left: 90px !important;
  }
}
    .demo-drawer {
        &__content {
            display: flex;
            flex-direction: column;
            height: 100%;
            form {
                flex: 1;
            }
        }
        &__footer {
            display: flex;
            button {
                flex: 1;
            }
        }
        &__header {
            text-align:right;
            margin-bottom:20px;
            width:100%;
        }
    }
    .el-drawer__body {
        padding: 20px;
    }
    .el-drawer__body{
      overflow-x:hidden;
      overflow-x:auto;
    }
    .queryForm .el-form-item{
      margin-bottom: 0px;
    }
    .el-input__inner{
      height: 36px;
    }
</style>
